<template>
  <div class='railTree'>
    <el-tree ref="menuTree" :show-checkbox="showCheckbox" :props="defaultProps" :data="data"
      :draggable="false" node-key="id" :check-strictly="true" :default-checked-keys="checkedKeys"
      :default-expand-all="treeConfig.defaultExpandAll" :default-expanded-keys="treeConfig.defaultExpandedKeys"
      :expand-on-click-node="false" @node-click="nodeClick">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>
          <span v-if="!data.type && data.meta.icon" :class="data.meta.icon" />
          <span v-if="data.type" class="el-icon-minus" />
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
  import { deepClone } from '@/utils'
  export default {
    name: '',
    props: {
      treeData: {
        type: Array,
        default: function () {
          return []
        }
      },
      showCheckbox:{
          type:Boolean,
          default:false
      },
      checkedKeys:{
        type:Array,
        default: function () {
          return []
        }
      }
    },
    data() {
      return {
        treeConfig: {
          defaultExpandAll: true, // 是否全部展开,默认:false
          defaultExpandedKeys: [], // 默认打开菜单节点数组,只展开菜单，操作按钮不展示
          allKeys: [], // 所有节点id,配合展示操作按钮
          notExpandedKeys: [], // 不包含展开的id，配合展示操作按钮
        },
        data: [],
        defaultProps: {
          children: 'children',
          label: (data, node) => {
            return data.meta.title
          }
        },
      };
    },
    watch:{
      treeData:{
        handler(n,o){
          this.filterMenus()
        },
        deep:true
      }
    },
    components: {},
    computed: {},
    methods: {
      nodeClick(data, node, obj) {
          this.$emit('node-click',{data,node})
      },
      // 基于菜单数据，给菜单末节点添加btn数据
      filterAddBtnPermissionMenus(menus) {
        menus.forEach(item => {
          if (item.children) {
            this.filterAddBtnPermissionMenus(item.children)
          } else {
            if (item.meta.btnPermission) {
              const btnArr = item.meta.btnPermission
              item.children = []
              btnArr.forEach((btn, key) => {
                item.children.push({
                  type: 'handleBtn', // 用以在菜单展示时，当前页面各种操作按钮此行，不显示（增删改）
                  meta: {
                    title: btn.label,
                    id: btn.id
                  }
                })
              })
            }
          }
        })
      },
      // 把meta里id调整到外层，配合el-tree的使用
      filterMenuId(menus) {
        menus.forEach(item => {
          const ID = item.meta.id
          item.id = ID
          if (item.children) this.filterMenuId(item.children)
        })
      },
      // 处理展开节点，操作的按钮收缩
      filterExpandId(menus) {
        this.filterNotExpandId(menus)
        const {
          allKeys,
          notExpandedKeys
        } = this.treeConfig
        allKeys.forEach(v => {
          if (notExpandedKeys.indexOf(v) === -1) this.treeConfig.defaultExpandedKeys.push(v)
        })
      },
      // 处理不展开的节点
      filterNotExpandId(menus) {
        menus.forEach(item => {
          this.treeConfig.allKeys.push(item.id)
          if (item.meta.btnPermission || item.type && item.type == 'handleBtn' || !item.children) {
            this.treeConfig.notExpandedKeys.push(item.id)
          }
          if (item.children) this.filterNotExpandId(item.children)
        })
      },
      filterMenus() {
        this.$nextTick(() => {
          this.$refs.menuTree.setCurrentKey(0)
        })
        const rootMenus = deepClone(this.treeData)
        //const rootMenus = this.treeData
        //this.filterAddBtnPermissionMenus(rootMenus) // 基于菜单数据，给菜单末节点添加btn数据
        this.filterMenuId(rootMenus)
        //this.filterExpandId(rootMenus) // 处理展开节点
        this.data = rootMenus

        //this.getCurMenuInfo()
      },
    },
    created() {},
    mounted() {
      this.filterMenus()
    }
  }

</script>
<style lang='scss' scoped>

</style>
<style scoped>
  .railTree /deep/ .el-tree-node.is-current>.el-tree-node__content {
    background: #f3f8fb;
    /* color: #fff; */
  }

  .railTree /deep/ .btnConfigItem .el-form-item {
    margin-bottom: 0px;
  }

</style>
